﻿<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
%>
<%@taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="copyright" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<title>模板管理</title>
<link href="<%=path%>/favicon.ico" rel="shortcut icon">

	<script type="text/javascript" src="<%=path%>/js/marketing/ckeditor/ckeditor.js"></script>

<%--<script type="text/javascript" src="<%=path%>/js/marketing/ckeditor/ckeditor.js"></script>--%>
<script type="text/javascript" src="<%=path%>/js/marketing/ckeditor/sample.js"></script>
<link href="<%=path%>/hplus/css/bootstrap.min14ed.css?v=3.3.6" rel="stylesheet">
<link href="<%=path%>/hplus/css/font-awesome.min93e3.css?v=4.4.0" rel="stylesheet">
<link href="<%=path%>/hplus/css/plugins/iCheck/custom.css" rel="stylesheet">
<link href="<%=path%>/hplus/css/animate.min.css" rel="stylesheet">
<link href="<%=path%>/hplus/css/style.min862f.css?v=4.1.0" rel="stylesheet">  
<style type="text/css">
 #editor table {
	 border-collapse: collapse;
 }
 #editor table tr,td {
	 border: 1px solid #ddd;
 }
</style>

</head>
<body  class="gray-bg">
   <div class="wrapper wrapper-content animated fadeInRight">
	<div class="container-fluid">
		<div class="row white-bg"  style="padding:40px">
			<div class="col-md-7 k_activity" id="photo" >
				<div >
					<div id="editor">
					
					</div>
					<h3 id="h3_bnsp">&nbsp;</h3>
					<div class="col-md-12" >
					    <div class="col-md-1"></div>
					    <form id="customerInfo" action="" class="form-horizontal col-md-10">
						  <div class="form-group">
	                         <label class="col-sm-3 control-label">活动名称</label>
	                         <div class="col-sm-6">
	                             <input id="title" type="text" class="form-control">
	                         </div>
	                      </div>
	                      <div class="form-group">
	                         <label class="col-sm-3 control-label">活动名称</label>
	                         <div class="col-sm-6">
	                             <input id="title" type="text" class="form-control">
	                         </div>
	                      </div>
	                      <div class="form-group">
	                         <label class="col-sm-3 control-label">活动名称</label>
	                         <div class="col-sm-6">
	                             <input id="title" type="text" class="form-control">
	                         </div>
	                      </div>
	                      <div class="col-md-12 text-center">
	                         <div class="col-sm-4"></div>
							 <button type="button" class="btn btn-w-m btn-danger col-sm-4">立即领取</button>
							 <div class="col-sm-4"></div>
						  </div>
					    </form>
					    <div class="col-md-1"></div>
					</div>
				</div>
				
				
				<div class="col-sm-12">
				  <ul class="col-md-12 s_footer" style="margin-top:80px">
				  </ul>
				</div>
			</div>
			<canvas id="canvas" width="5" height="5"></canvas>
			<div class="col-md-5 text-left">
			    <div class="col-md-2"></div>
			    <button id="x_button_l" type="button" class="btn btn btn-default col-md-3" onclick="window.location.href='javascript:back();'">重新编辑</button>
                <button id="x_button_y" type="button" class="btn  btn-warning col-md-2" style="margin-left:5px" onclick="window.location.href='javascript:intentSave();'">保存</button>
                <button id="save_crate" type="button" class="btn  btn-primary col-md-4" style="margin-left:5px" >保存并创建活动</button>
               <!--  <button type="button" class="btn  btn-primary col-md-3" onclick="javascript:test();">test</button>
 -->			</div>
		</div>
	</div>
   </div>
         
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
   	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>
	<script type="text/javascript" src="<%=path%>/js/marketing/html2canvas.js"></script>
    <script type="text/javascript">
    var model_id;
    var text_info;
    
    var access_token=$.cookie('access_token');
	var cid=$.cookie('cid');
	var uid=$.cookie('uid');
    
    $(function(){
    	model_id=getQueryString("model_id");
    	getModelInfo(model_id);
    });
    
    $('#x_button_l').click(function(){
    	window.location.href = "<%=path%>/view/ui/createModel?type=model&model_id="+model_id;
	  });
    $('#save_crate').click(function(){
      	window.location.href = "<%=path%>/view/ui/createModel?type=activity&model_id="+model_id;
  	  });
    
    //获取模板信息
	function getModelInfo(model_id) {
		var url = "<%=path%>/activityDefinedTemplate/ajaxTemplateDetail";
		$.post(url, {
			"access_token" : access_token,
			"cid" : cid,
			"uid" : uid,
			"id" : model_id,
		}, function(data) {
			
			if (data.status == 200) {
				
				intModelHtml(data.data);
			} else {
				alert("获取模板信息失败");
			}
		});
	}
    
    
    function intModelHtml(data) {
    	var html=data.content;
    	$('#editor').html(html);
    	//设置二维码
		var html_footer='';
		if(StringEmpty(data.weixinQrcode)&&StringEmpty(data.weiboQrcode)){
			html_footer+='<li class="col-md-6 text-center"><img src="'+data.weixinQrcode+'"  style="width:79px;height:79px;"><p>微信二维码</p></li>';
			html_footer+='<li class="col-md-6 text-center"><img src="'+data.weiboQrcode+'"  style="width:79px;height:79px;"><p>微博二维码</p></li>';
		}else if(StringEmpty(data.weixinQrcode)){
			html_footer+='<li class="col-md-6 text-center"><img src="'+data.weixinQrcode+'"  style="width:79px;height:79px;"><p>微信二维码</p></li>';

		}else if(StringEmpty(data.weiboQrcode)){
			html_footer+='<li class="col-md-6 text-center"><img src="'+data.weiboQrcode+'"  style="width:79px;height:79px;"><p>微博二维码</p></li>';

		}
		$(".s_footer").html(html_footer); 
		
		
    	
		/* test(); */
    	 setCommitInfo(data); 
	}
    
    function setCommitInfo(data) {
		//設置提交信息按钮框
		var commit_info=data.collectInfo.split(",");
			var button_html='';
			for(var i=0;i<commit_info.length;i++){
				switch (commit_info[i]) {
				case "commit_name":
					
					button_html+='<div class="form-group"><label class="col-sm-3 control-label">姓名</label><div class="col-sm-6"><input id="title" type="text" class="form-control"></div></div>';
					break;
	            case "commit_mobile":
					button_html+='<div class="form-group"><label class="col-sm-3 control-label">电话</label><div class="col-sm-6"><input id="title" type="text" class="form-control"></div></div>';
					break;
				case "commit_email":
					email_flag=true;
					button_html+='<div class="form-group"><label class="col-sm-3 control-label">邮箱</label><div class="col-sm-6"><input id="title" type="text" class="form-control"></div></div>';
					break;
	            case "commit_weibo":
	            	weibo_flag=true;
					button_html+='<div class="form-group"><label class="col-sm-3 control-label">微博</label><div class="col-sm-6"><input id="title" type="text" class="form-control"></div></div>';
					break;
	            case "commit_weixin":
	            	weixin_flag=true;
					button_html+='<div class="form-group"><label class="col-sm-3 control-label">微信</label><div class="col-sm-6"><input id="title" type="text" class="form-control"></div></div>';
					break;
	            case "commit_job":
	            	job_flag=true;
					button_html+='<div class="form-group"><label class="col-sm-3 control-label">职位</label><div class="col-sm-6"><input id="title" type="text" class="form-control"></div></div>';
					break;
	            case "commit_company":
	            	company_flag=true;
					button_html+='<div class="form-group"><label class="col-sm-3 control-label">公司</label><div class="col-sm-6"><input id="title" type="text" class="form-control"></div></div>';
					break;
				default:
					break;
				}
			}
			button_html+='<div class="col-md-12 text-center"><div class="col-sm-4"></div><button type="button" class="btn btn-w-m btn-danger col-sm-4 s_get_btn" style="margin-top:20px">'+(data.buttonText!="" ? data.buttonText:"立即领取")+'</button><div class="col-sm-4"></div></div>';
			$('#customerInfo').html(button_html);
			if(StringEmpty(data.buttonCss)&&data.buttonCss!="#000000")
			$(".s_get_btn").css("background-color",data.buttonCss);
			if(StringEmpty(data.remarks)){
				background_color=data.remarks;
				$(".k_activity").css("background-color",backgroundColor);
			}
			$('#photo').find('img').attr("crossOrigin","anonymous");
			//html2canvas截图
			html2canvas(document.getElementById('photo'), {
	    		allowTaint: true,
	    		taintTest: false,
	    		onrendered: function(canvas) {
		    		//debugger;
		    		//生成base64图片数据
		    		try{
		    			var dataUrl = canvas.toDataURL('image/png');
					    /* canvas.style.width = "119px";
					    canvas.style.height = "192px"; */ 
		    			//document.getElementById("show_canvas").append(canvas);
		    			$.ajax({
		                    url:'<%=path%>/activityDefinedTemplate/ajaxScreenShot',
		                    type:'POST',
		                    data:{
		                        base64ImgData : JSON.stringify(dataUrl)
		                    },
		                    success:function(data){
								$.ajax({
									url:'<%=path%>/activityDefinedTemplate/ajaxEditTemplate',
									type:'POST',
									data:{
										"thumbnailPic":data.pic_url,
										"modelPic":data.pic_url,
										"cid":cid,
										"id":model_id,
										"uid":uid,
										"access_token":access_token
									},
									success:function(msg2){
									},
									error:function(){
										console.log("请求接口失败");
									}
								})
		                    },
		                    error:function(XMLHttpRequest){
		                    	console.log(XMLHttpRequest);
		                    }
		                });
					}catch(err){
						console.log(err);
						console.log("有canvas跨域图片链接");
					}
		    		
	    		}
	    	}); 
	}
    
    
    function test(){
    	var img=$('#photo').find('img').attr("src");
    	alert("img--->"+img);
    		var image = new Image();
			image.src = img;
			img.crossOrigin = "anonymous";
		    var base64 = getBase64Image(image);
		    console.log(base64);
    		
    	
    	html2canvas(document.getElementById('photo'), {
    		allowTaint: true,
    		taintTest: false,
    		onrendered: function(canvas) {
	    		//debugger;
	    		//生成base64图片数据
	    		try{
	    			var dataUrl = canvas.toDataURL('image/png');
				    /* canvas.style.width = "119px";
				    canvas.style.height = "192px"; */ 
	    			//document.getElementById("show_canvas").append(canvas);
	    			$.ajax({
	                    url:'<%=path%>/activityDefinedTemplate/ajaxScreenShot',
	                    type:'POST',
	                    data:{
	                        base64ImgData : JSON.stringify(dataUrl)
	                    },
	                    success:function(data){
							
							$.ajax({
								url:'<%=path%>/activityDefinedTemplate/ajaxEditTemplate',
								type:'POST',
								data:{
									"thumbnailPic":data.pic_url,
									"cid":cid,
									"id":model_id,
									"uid":uid,
									"access_token":access_token
								},
								success:function(msg2){
									console.log(jQuery.parseJSON(msg2));
								},
								error:function(){
									console.log("请求接口失败");
								}
							})
	                    },
	                    error:function(XMLHttpRequest){
	                    	console.log(XMLHttpRequest);
	                    }
	                });
				}catch(err){
					console.log(err);
					console.log("有canvas跨域图片链接");
				}
	    		
    		}
    	});
    }
    
    function getBase64Image(img) {
        var canvas = document.createElement("canvas");
        canvas.width = img.width;
        canvas.height = img.height;
        var ctx = canvas.getContext("2d");
        ctx.drawImage(img, 0, 0, img.width, img.height);
        var ext = img.src.substring(img.src.lastIndexOf(".")+1).toLowerCase();
        var dataURL = canvas.toDataURL("image/"+ext);
        return dataURL;
    }
    
    
    
	//获取参数
	function getQueryString(name) {
		var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
		var r = window.location.search.substr(1).match(reg);
		if (r != null)
			return unescape(r[2]);
		return null;
	}
	//判断字符串是否为空
	function StringEmpty(content) {
		if (content == undefined || content == "" || content == null) {
			return false;
		} else {
			return true;
		}
	}
	function intentSave(){
		setTimeout("location.href='<%=path%>/view/ui/activityTemplateList';", 1100);  
		showDialog("保存成功");
		
		
	}
	
	 function showDialog(title){
		$('#dialog_title').html('<img src="<%=path%>/images/marketing/s_tick.png"/>'+title+''); 
		$('.s_popup_delect2,.s_consum').show().delay(1000).fadeOut();
	}
    </script>
    
	
</body>
</html>